import InfiniteScrollList from "./components/SrollElement";

// 模拟加载更多数据的函数
const mockLoadMore = async (
  page: number
): Promise<{ id: number; title: string; description: string }[]> => {
  // 模拟网络请求
  await new Promise((resolve) => setTimeout(resolve, 1000));
  return Array.from({ length: 10 }, (_, i) => ({
    id: (page - 1) * 10 + i + 1,
    title: `标题 ${(page - 1) * 10 + i + 1}`,
    description: `这是第 ${
      (page - 1) * 10 + i + 1
    } 项的描述内容，内容可以更丰富一些。`,
  }));
};

const initialData = Array.from({ length: 10 }, (_, i) => ({
  id: i + 1,
  title: `标题 ${i + 1}`,
  description: `这是第 ${i + 1} 项的描述内容，内容可以更丰富一些。`,
}));

const ExamplePage: React.FC = () => {
  return (
    <div className="p-4 bg-gray-100 min-h-screen">
      <h1 className="text-2xl font-bold mb-4 text-center">无限滚动列表示例</h1>
      <InfiniteScrollList
        loadMore={mockLoadMore}
        initialData={initialData}
        itemHeight={120}
      />
    </div>
  );
};

export default ExamplePage;
